<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        th,
        td {
            padding: 20px;
        }
    </style>
</head>

<body>

    <div id="app">
        <!-- 购物车数据渲染 -->
        <table border="1" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th>
                        <input type='checkbox' v-model="checkedall" @change="checkedAllFn" /> 全选
                    </th>
                    <th>
                        商品名称
                    </th>
                    <th>
                        商品价格
                    </th>
                    <th>
                        商品的数量
                    </th>
                    <th>小计</th>
                    <th>
                        操作
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in goodslist">
                    <td>
                        <input type='checkbox' v-model="item.checked" @change="checkedFn" />
                    </td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="item.num--" :disabled="item.num==1">-</button>
                        <span>{{item.num}}</span>
                        <button @click="item.num++">+</button>
                    </td>
                    <td>{{item.price*item.num}}</td>
                    <td>
                        <button @click="delFn(item.id)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <p>总价:{{totalPrice()}}</p>
    </div>

</body>

</html>
<script>
    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
                goodslist: [
                    {
                        id: 1,
                        name: '雅诗兰黛粉底液',
                        price: 800,
                        num: 2,
                        checked: true
                    },
                    {
                        id: 2,
                        name: '兰蔻小黑瓶',
                        price: 600,
                        num: 1,
                        checked: true
                    },
                    {
                        id: 3,
                        name: '迪奥口红',
                        price: 400,
                        num: 3,
                        checked: true
                    },
                    {
                        id: 4,
                        name: '海蓝之谜',
                        price: 900,
                        num: 2,
                        checked: true
                    }
                ],
                checkedall: true // 全选的状态
            }
        },
        methods: {
            // 修改全选的状态
            checkedAllFn() {
                // console.log('checkedall', this.checkedall);
                this.goodslist.forEach(item => {
                    item.checked = this.checkedall
                })
            },
            // 单选
            checkedFn() {
                //console.log('单选');
                // 修改全选按钮的选中状态
                // let boolean = arr.every(item=>条件)  每一天条件都为true 则boolean 为true,否则为false
                this.checkedall = this.goodslist.length == 0 ? false : this.goodslist.every(item => item.checked == true)
                // console.log('boolean', boolean);

            },
            // 删除
            delFn(id) {
                // console.log('id', id);
                // arr.splice(起始下标,删除个数,添加的元素)
                this.goodslist.forEach((item, index) => {
                    if (item.id == id) {
                        this.goodslist.splice(index, 1)
                    }
                })

                // 调用单选的方法
                // console.log('this', this);
                this.checkedFn()

            },
            totalPrice() {
                let sum = 0  //总价的初始值
                this.goodslist.forEach(item => {
                    if (item.checked) {
                        sum += item.price * item.num
                    }
                })

                return sum
            }

        }
    }).mount('#app')


</script>